<template>
  <div>
    <div class="recommend-title">
      正在修改<span @click="back" class="back">返回</span>
    </div>
    <div class="item border-bottom" v-if="recommend">
      <div class="item-img-wrapper">
        <img class="item-img" :src="imgBaseURL + recommend.imgUrl" />
        <div class="changePic" @click="$refs.addPicFile.click()">
          <img src="@/assets/images/icons/remove_small.png" />
        </div>
        <input
          type="file"
          @change="changePic"
          multiple
          accept="image/jpg,image/jpeg,image/png,image/bmp"
          style="display: none"
          ref="addPicFile"
        />
      </div>
      <div class="item-info">
        <input class="item-title" type="text" v-model="recommend.title" />
        <input class="item-desc" type="text" v-model="recommend.desc" />
        <br />
        <button @click="addCategory(recommend)" class="item-more">新增</button>
        <button @click="save(recommend)" class="item-more">保存</button>
      </div>
    </div>
    <!-- detail start -->
    <div class="category" v-for="(category, index) of list" :key="index">
      <input
        type="text"
        class="category-title border-bottom"
        v-model="category.title"
      />
      <div class="category-wrapper border-bottom">
        <div class="category-subtitle">
          <input type="text" v-model="category.subTitle" />
          <input type="text" class="category-desc" v-model="category.desc" />
          <br />
          <button @click="delCategory(category)" class="item-more">删除</button>
          <button @click="saveCategory(category)" class="item-more">
            保存
          </button>
        </div>
        <input type="text" class="category-price" v-model="category.price" />
      </div>
    </div>
    <!-- detail end -->
  </div>
</template>
<script>
/* eslint-disable */
import axios from "axios";

export default {
  name: "RecommendEdit",
  data() {
    return {
      recommendId: this.$route.query.recommendId,
      imgBaseURL: process.env.BASE_API,
      list: [],
      recommend: null,
    };
  },
  methods: {
    getInfo: function (id) {
      axios.defaults.baseURL = process.env.BASE_API;
      console.log(id);
      console.log(process.env.BASE_API);
      axios.get("/api/recommend/get/" + id).then(this.getInfoSucc);
    },
    getInfoSucc: function (res) {
      this.recommend = res.data;
      console.log(this.recommend);
    },
    changePic: function (e) {
      var that = this;
      let formData = new window.FormData();
      for (let i = 0; i < e.target.files.length; i++) {
        formData.append("file", e.target.files[i]);
        let ext = e.target.files[i].name.split(".")[1];
        if (!(ext === "jpg" || ext === "png" || ext === "jpeg")) {
          console.log("格式错误");
          return;
        }
        axios
          .post("/api/recommend/image/change/" + this.recommendId, formData)
          .then(this.uploadSucc);
      }
    },
    changeCategoryPic: function (e, category) {
      console.log(category.categoryId);
      var that = this;
      let formData = new window.FormData();
      for (let i = 0; i < e.target.files.length; i++) {
        formData.append("file", e.target.files[i]);
        let ext = e.target.files[i].name.split(".")[1];
        if (!(ext === "jpg" || ext === "png" || ext === "jpeg")) {
          console.log("格式错误");
          return;
        }
        axios
          .post("/api/category/image/change/" + category.categoryId, formData)
          .then(this.uploadSucc(e.target.files[i]));
      }
    },
    uploadSucc: function (file) {
      console.log("changePic uploadSucc ");
      this.getInfo(this.recommendId);

      //   this.$parent.getRecommend();
    },
    addCategory: function (recommend) {
      var param = {
        recommendId: recommend.recommendId,
        title: "标题",
        subTitle: "副标题",
        desc: "描述",
        price: "0.0",
      };
      axios.defaults.baseURL = process.env.BASE_API;
      console.log(param);
      axios.post("/api/category/add", param).then(this.list.push(param));
    },

    save: function (recommend) {
      axios.defaults.baseURL = process.env.BASE_API;
      console.log(recommend);
      axios.post("/api/recommend/update", recommend).then(this.updateSucc);
    },
    delCategory: function (category) {
      axios.defaults.baseURL = process.env.BASE_API;
      console.log(category);
      axios
        .get("/api/category/del/" + category.categoryId)
        .then(this.list.splice(this.list.indexOf(category), 1));
    },
    saveCategory: function (category) {
      axios.defaults.baseURL = process.env.BASE_API;
      axios.post("/api/category/update", category).then(this.updateSucc);
    },
    updateSucc: function () {
      console.log("updateSucc ....... ");
      this.$toast("保存成功");
    },
    getDetailInfo: function () {
      axios.defaults.baseURL = process.env.BASE_API;
      axios
        .get("/api/category/get/" + this.recommendId)
        .then(this.handleGetDataSucc);
    },
    handleGetDataSucc: function (res) {
      this.list = res.data;
    },
    back: function () {
      this.$router.back(-1);
    },
  },
  mounted() {
    this.getInfo(this.recommendId);
    this.getDetailInfo();
  },
  activated() {
    this.getInfo(this.recommendId);
    this.getDetailInfo();
  },
};
</script>
<style scoped>
.recommend-title {
  margin-top: 0.2rem;
  line-height: 0.8rem;
  background: #eee;
  text-indent: 0.2rem;
}

.item {
  overflow: hidden;
  display: flex;
  height: 1.9rem;
}

.item-img {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0.1rem;
}

.item-info {
  flex: 1;
  padding: 0.1rem;
  min-width: 0;
}

.item-info .item-title {
  line-height: 0.54rem;
  font-size: 0.32rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}
.item-info .item-desc {
  line-height: 0.4rem;
  color: #ccc;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item-more {
  line-height: 0.6rem;
  margin-top: 0.16rem;
  background: #ff9300;
  padding: 0 0.2rem;
  border-radius: 0.05rem;
  color: #fff;
}

.back {
  color: #ff9300;
  float: right;
  margin-right: 0.16rem;
}

.changePic {
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  z-index: 99;
}

.category-title {
  line-height: 0.8rem;
  font-size: 0.32rem;
  padding: 0 0.2rem;
}

.category-wrapper {
  display: flex;
  align-items: center;
}

.category-subtitle {
  flex: 1;
  line-height: 0.6rem;
  font-size: 0.3rem;
  padding: 0 0.5rem;
  font-weight: 800;
}

.category-subtitle input {
  width: 100%;
}

.category-desc {
  padding-left: 0.1rem;
  color: #999;
  font-size: 0.28rem;
}

.category-price {
  width: 1.8rem;
  text-align: center;
  font-size: 0.42rem;
  color: #ff9900;
}
</style>
